iT邦幫忙

2023 iThome 鐵人賽

0
SideProject30

sideproject-簡易網站系列 第 21

Day-21 下拉式選單

  • 分享至 

  • xImage
  •  

主要分為select,option,及optgroup三部分

<select>
      <option>trapper</option>
      <option selected>選擇您的殺手</option>
      <option>freddy</option>
      <option>wraith</option>
      <option disabled>doctor</option>
      <option>hunter</option>
</select>

disabled會讓選項變得不可選 用處像是在商品缺貨時
selected設定預先選取此選項
https://ithelp.ithome.com.tw/upload/images/20231017/20163238vlnGDP9wQE.png
若設定<select size="2">
則一次只能瀏覽2個選項
https://ithelp.ithome.com.tw/upload/images/20231017/20163238YHInY8INDq.png
可以用optgroup分類

<select name="角色">
      <optgroup label="倖存者">
        <option>daniel</option>
        <option>james</option>
        <option>calvin</option>
      </optgroup>
      <optgroup label="殺手">
        <option>trapper</option>
        <option>doctor</option>
        <option>wraith</option>
      </optgroup>
    </select>

https://ithelp.ithome.com.tw/upload/images/20231017/20163238zZ89IK1RQD.png


上一篇
Day-20 認識CSS 偽元素 ( before 與 after )
下一篇
Day-22 Bootstrap5入門
系列文
sideproject-簡易網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言